<template>
  <div class="time-sty">
    <div class="time-label">{{ labelText }}</div>
    <div class="time-text">
      <span>{{ hours }}</span>:<span>{{ min }}</span>:<span>{{ sec }}</span>
    </div>
  </div>
</template>
<script>

export default {
  props: {
    labelText: String,
    startTime: {
      type: [String, Number],
      default: 0
    },
    endTime: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      hours: "00",
      min: "00",
      sec: "00",
    }
  },
  created() {
    this.countDown(this.startTime, this.endTime)
  },
  methods: {
    timeFormat(param) {
      return param < 10 ? "0" + param : param;
    },
    countDown(newTime, endTime) {
      clearInterval(this.interval);
      this.interval = null;
      this.interval = setInterval(() => {
        // 对结束时间进行处理渲染到页面
        let obj = null;
        // 如果活动未结束，对时间进行处理
        if (endTime - newTime > 0) {
          let time = endTime - newTime;
          // 获取时、分、秒
          let hours = parseInt(time / (1000 * 3600));
          let remainingSeconds = time % (1000 * 3600);
          let min = parseInt(remainingSeconds / (1000 * 60));
          let sec = parseInt((remainingSeconds % (1000 * 60)) / 1000);
          obj = {
            hours: this.timeFormat(hours),
            min: this.timeFormat(min),
            sec: this.timeFormat(sec),
          };
          newTime += 1000;
        } else {
          // 活动已结束，全部设置为'00'
          obj = {
            hours: "00",
            min: "00",
            sec: "00",
          };
          clearInterval(this.interval);
          this.activityShow = false;
        }
        this.hours = obj.hours;
        this.min = obj.min;
        this.sec = obj.sec;
      }, 1000);
    },
  }
}
</script>

<style lang="less" scoped>
.time-sty {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: start;

  .time-label {
    font-family: Open Sans, Open Sans;
    font-weight: 400;
    font-size: 15px;
    color: #ffffff;
    line-height: 18px;
    margin-bottom: 8px;
  }

  .time-text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: Open Sans, Open Sans;
    font-weight: 600;
    font-size: 13px;
    color: #ffffff;
    line-height: 15px;

    span {
      padding: 6px;
      background: rgba(20, 20, 20, 0.38);
      border-radius: 2px 2px 2px 2px;
      border: 1px solid #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>